import Link from 'next/link';
import {
  CodeOutlined,
  FireOutlined,
  FundViewOutlined,
} from '@ant-design/icons';
import { Avatar, Button, Divider } from 'antd';
import { GetStaticPropsContext } from 'next'

import ListItem from '@/components/listItem';
import { prepareConnection } from "@/db";
import { User, Article } from "@/db/entity";

import styles from './index.module.scss';

export const getStaticPaths = async () => {
  // 这里的 paths 主要是 user下面的id的集合：user/[id]
  const db = await prepareConnection()
  const users = await db.getRepository(User).find()
  const userIds = users?.map((user) => ({ params: { id: String(user.id) } }))

  return {
    // [{params: '1'}, {params: '2'} ...]
    paths: userIds,
    fallback: 'blocking'
  }
}

export const getStaticProps = async ({ params }: GetStaticPropsContext) => {
  const userId = params?.id

  const db = await prepareConnection();
  const user = await db.getRepository(User).findOne({
    where: {
      id: Number(userId)
    }
  })

  const articles = await db.getRepository(Article).find({
    // 寻找当前查看用户的文章
    where: {
      user: {
        id: Number(userId)
      }
    },
    relations: ['user', 'tags']
  })

  return {
    props: {
      userInfo: JSON.parse(JSON.stringify(user)),
      articles: JSON.parse(JSON.stringify(articles)),
    }
  }
}


const UserDeatil = (props: any) => {
  const { userInfo = {}, articles = [] } = props;
  const viewsCount = articles?.reduce(
    (prev: any, next: any) => prev + next?.views,
    0
  ); // 统计所有文章总的浏览次数
  return (
    <div className={styles.userDetail}>
      <div className={styles.left}>
        <div className={styles.userInfo}>
          <Avatar className={styles.avatar} src={userInfo?.avatar} size={90} />
          <div>
            <div className={styles.nickname}>{userInfo?.nickname}</div>
            <div className={styles.desc}>
              <CodeOutlined /> {userInfo?.job}
            </div>
            <div className={styles.desc}>
              <FireOutlined /> {userInfo?.introduction}
            </div>
          </div>
          <Link href="/user/profile">
            <Button>编辑个人资料</Button>
          </Link>
        </div>
        <Divider />
        <div className={styles.article}>
          {articles?.map((article: any) => (
            <div key={article?.id}>
              <ListItem article={article} />
              <Divider />
            </div>
          ))}
        </div>
      </div>
      <div className={styles.right}>
        <div className={styles.achievement}>
          <div className={styles.header}>个人成就</div>
          <div className={styles.number}>
            <div className={styles.wrapper}>
              <FundViewOutlined />
              <span>共创作 {articles?.length} 篇文章</span>
            </div>
            <div className={styles.wrapper}>
              <FundViewOutlined />
              <span>文章被阅读 {viewsCount} 次</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default UserDeatil
